<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="详情" left-arrow @click-left="$router.go(-1)">
                <template #right>
                    <van-icon name="ellipsis" size="22" @click="showShare = true" />
                </template>
            </van-nav-bar>
        </header>
        <main class="content">
            <div><img :src="detailInfo.image" alt="" style="width:100%;"></div>
            <div>{{ detailInfo.title }}</div>
            <div style="color:red"> ￥ {{ detailInfo.price }}</div>
        </main>
    </div>
    <footer class="footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
            <van-action-bar-icon icon="shop-o" text="店铺" />
            <van-action-bar-button type="warning" text="加入购物车" @click="add" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
</template>

<script setup>
/* 
   router跳转页面有四个方法： push、replace、go、back
*/
import { onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router'
import request from '@/utils/request'
const route = useRoute()
const router = useRouter()
const detailInfo = ref({})
const showShare = ref(false)
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
]
onMounted(() => {
    console.log(route.params.id)
    request.get('/detail', {
        params: {
            id: route.params.id
        }
    }).then(res => {
        if (res.data.code == 200) {
            console.log(res.data.data, '对象')
            detailInfo.value = res.data.data
        }
    })
})

const add=()=>{
    if(localStorage.getItem('token')){
        console.log('登录');
        
    }else{
        router.push('/login')
    }
}
</script>